import React,{Component} from 'react';
import './navigation.less';
import classNames from 'classnames';
import Lang from './Lang.json';
import PropTypes from 'prop-types';
import Adaptive from '../../component/adaptive/Adaptive';
import Mobile from './mobile/Mobile';
const prefix = 'navigation';
class Navigation extends Component{
    componentDidMount(){
        if(this.props.refName){
            let ref = this.props.refName;
            let a_ref = this.props.childNodes;
            if(this[ref]){this[ref].style.background = '#2381e8'};
            if(this[a_ref]){this[a_ref].style.color = '#fff'};
        }
    }
    render(){
        let list = Lang.map((value,index)=>{
            let ref = value.ref;
            let a_ref = value.childNodes;
            return(
                value.children?
                <span className={classNames(prefix+"-list-children","hover-"+index)} key={index} ref={(name)=>{this[ref]=name}}>
                    <a href={value.link} ref={(name)=>{this[a_ref]=name}}>{value.name}</a>
                    <ul>
                        {value.children.map((children,key)=>{
                            return(
                                <li key={key}><a href={children.link}>{children.name}</a></li>
                            )
                        })}
                    </ul>
                </span>:
                <span className={prefix+"-list-children"} key={index} ref={(name)=>{this[ref]=name}}>
                    <a href={value.link} ref={(name)=>{this[a_ref]=name}}>{value.name}</a>
                </span>
            )
        });
        return(
            <div className={prefix}>
                <div className={prefix+'-best'}>
                    <div style={{background:"#2381e8"}}>
                        <div className={prefix+"-number clearfix"}>
                            <Adaptive desktop={
                                <div className={prefix+"-list"}>
                                    <a href='http://www.mayoclinic.org/'>Mayo Clinic</a>
                                    <a href='http://www.huimei.net/' target="_blank" rel="noopener noreferrer">惠每医疗集团</a>
                                </div>
                            } phone={
                                <div className={prefix+"-list"}>
                                    <a href='http://www.mayoclinic.org/'>Mayo Clinic</a>
                                    <a href='http://www.huimei.net/index1.html' target="_blank" rel="noopener noreferrer">惠每医疗集团</a>
                                </div>
                            } size={1200}/>
                            <Adaptive desktop={
                                <div className={prefix+"-login"}>
                                    <a href="http://am.huimeibest.com/admin/login" target="_blank" rel="noopener noreferrer">登录</a><span style={{margin:"0 5px",color:'#fff'}}>|</span><span style={{color:'#fff'}}>咨询热线：<span>400-691-5199</span></span>
                                </div>
                            } phone={
                                <div className={prefix+"-login"}>
                                    <span style={{color:"#fff"}}>咨询热线：<span>400-691-5199</span></span>
                                </div>
                            } size={1200}/>
                        </div>
                    </div>
                    {/*<div className={prefix+"-box"}>*/}
                        {/*<img src={require("./img/logo.png")} alt="logo"/>*/}
                        {/*<div className={prefix+"-list"}>*/}
                            {/*{list}*/}
                        {/*</div>*/}
                    {/*</div>*/}
                    {/*以下为pc=>移动端切换的功能组件使用实例*/}
                    <Adaptive desktop={<div className={prefix+"-box"}>
                        <img src={require("./img/logo.png")} alt="logo"/>
                        <div className={prefix+"-list"}>
                            {list}
                        </div>
                    </div>} phone={
                        <Mobile/>
                    } size={1200}/>
                </div>
            </div>
        )
    }
}
export default Navigation;
Navigation.propTypes = {
    refName:PropTypes.string,
    childNodes:PropTypes.string,
};